<template>
    <div class="purchase">
        <!--选项卡  -->
        <div class="love_list">
            <ul class="btn_list">
                <li v-for="(item,index) in activeName" :key="index" :class="{active:isActive[index]}" @click="activePurchase(index)">
                    {{item.title}}
                </li>
            </ul>
            <div class="loveYuan">
                <yd-icon name="love" custom slot="icon"></yd-icon>
            </div>
        </div>
        <div class="purchase_box">
            <div class="purchase_box_ul" @click="receiving" v-show="parents">
                <div class="purchase_title" v-if="addressId">
                    <b>{{receivings.trueName}}</b>
                    <b>{{receivings.mobPhone}}</b>
                </div>
                <div class="purchase_title_dz" v-if="addressId">
                    {{receivings.areaInfo}} {{receivings.address}}
                </div>
                <span class="editBtn" v-if="addressId">修改</span>
                <div v-if="!addressId" class="purchase_title_dz" style="line-height:0.55rem">
                    暂无收货地址
                </div>
                <span v-if="!addressId" class="editBtn">新增</span>
            </div>
            <div class="purchase_box_ul" v-show="!parents">
                <div class="purchase_imgs">
                    <!-- <img src="../../assets/er.png"> -->
                    <canvas id="qrccode-canvas"></canvas>
                    <div class="purchase_imgs_right">
                        您支付完成后即可展示本商品二维码.可将二维码微信转发给朋友，对方扫描识别后填写收货地址，即可接受礼品.
                    </div>
                </div>
            </div>
            <div class="purchase_box_ul_bottom" @click="invoice">
                <div v-if="inoice.invId" class="purchase_title_fp">
                    发票信息：{{inoice.invTitle}}
                </div>
                <div v-if="inoice.invId" class="purchase_title_fp">
                    发票名称：{{inoice.invCompany}}
                </div>
                <div v-if="inoice.invId && inoice.invCode" class="purchase_title_fp">
                    发票税号：{{inoice.invCode}}
                </div>
                <div v-if="inoice.invId" class="purchase_title_fp">
                    发票类型：增值税普通发票/纸质
                </div>
                <div v-if="inoice.invId" class="purchase_title_fp">
                    寄送方式：随商品一起送
                </div>
                <span v-if="inoice.invId" class="editBtn">修改</span>
                <div v-if="!inoice.invId" class="purchase_title_fp" style="line-height:0.55rem">
                    暂无发票信息
                </div>
                <span v-if="!inoice.invId" class="editBtn">新增</span>
            </div>
            <div class="purchase_img">
                <img src="../../assets/bottom.png">
            </div>
        </div>
        <div class="order_boxs">
            <div class="order_title">
                订单详情
            </div>
            <div class="order_img" v-if="cartChannel==1" @click="goodlist(1)">
                <img v-if='index<3' v-for="(item,index) in imgList" :key="index" :src="imgUrl+item.goodsImage">
                <span class="order_right">
                    共{{cartChannelLength}}件
                </span>
            </div>
            <div class="order_img" v-else @click="goodlist(2)">
                <img v-if='index<3' v-for="(item,index) in imgList" :key="index" :src="item.goodsImage">
                <span class="order_name">{{imgList[0].goodsName}}</span>
                <span class="order_right">
                    共{{imgList[0].spinner}}件
                </span>
            </div>
            <ul class="order_ul">
                <li>
                    <div class="order_lefts">商品金额</div>
                    <div class="order_rights">￥
                        <yd-countup :endnum="cartTotalAmount" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
                <li v-show="isEmployee==1">
                    <div class="order_lefts">内部员工价</div>
                    <div class="order_rights">￥
                        <yd-countup :endnum="empAmount" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
                <li>
                    <div class="order_lefts">快递费用</div>
                    <div class="order_rights">
                        <b>（包邮）</b>￥
                        <yd-countup :endnum="shipAmount" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
                <li>
                    <div class="order_lefts">发票单寄</div>
                    <div class="order_rights">￥
                        <yd-countup endnum="0" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom_fiexd" @click="pay">
            确认下单 ￥
            <yd-countup :endnum="totalAmount" duration="0.1" decimals="2" separator=","></yd-countup>
        </div>
    </div>
</template>
<script>
// import wx from 'weixin-js-sdk'
import QRCode from 'qrcode'
var canvas = '';

export default {
    name: 'purchase',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            activeName: [
                {
                    title: '自己买',
                    buyType: '1'
                },
                {
                    title: '送朋友',
                    buyType: '2'
                }
            ],
            buyType: '1',
            isActive: [true],
            parents: true,
            //收货地址ID
            addressId: '',
            //1购物车统一下单  2直接购买 （非必填 缺省值1）
            cartChannel: '1',
            openId: '',
            //常用地址
            receivings: {},
            //发票
            inoice: {},
            //发票ID
            invoiceId: '',
            // 0:非内部员工 1：内部员工
            isEmployee: 0,
            //金额
            cartChannelLength: 0,
            cartTotalAmount: 0,
            empAmount: 0,
            shipAmount: 0,
            totalAmount: 0,
            imgList: [],
            href: '',
        }
    },
    created: function() {
        this.cartChannel = this.$route.query.shop || '1';
        let pays = this.$route.query.pays || '0';
        if (pays == '1') {
            this.parents = false;
            this.buyType = '2';
            this.isActive = [];
            this.$set(this.isActive, 1, true);
        }
        if (this.cartChannel == '2') {
            this.imgList = this.$store.state.imglist;
        } else {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'cart/list?selected=1')
                .then((response) => {
                    if (response.status == 200) {
                        for (var i = 0; i < response.data.object.length; i++) {
                            this.cartChannelLength += response.data.object[i].goodsNum;
                        }
                        this.imgList = response.data.object;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        }
        this.openId = this.$store.state.openId || '';
        this.href = window.location.href.split('#')[0];
        this.saveReceiving();
    },
    mounted: function() {
        this.$store.commit('scan', '');
        this.$nextTick(function() {
            // DOM操作
            let bannerUrl = this.CONSTANT.weChatBaseUrl;
            canvas = document.getElementById('qrccode-canvas');
            QRCode.toCanvas(canvas, bannerUrl, (error) => {
                if (error) {
                    console.log(error)
                } else {
                    console.log('success')
                }
            })
        })
    },
    methods: {
        //我的发票
        saveInoice() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'invoice/list')
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.object.length > 0) {
                            this.inoice = response.data.object[0];
                            this.invoiceId = response.data.object[0].invId || '';
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //常用地址
        saveReceiving() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'address/addressList')
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.object.length > 0) {
                            for (var i = 0; i < response.data.object.length; i++) {
                                var element = response.data.object[i].isDefault;
                                if (element == '1') {
                                    this.receivings = response.data.object[i];
                                    this.addressId = response.data.object[i].addressId || '';
                                }
                            }
                        }
                    }
                    this.init();
                    this.saveInoice();
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //金额计算
        init() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'checkout/orderCheckout?addressId=' + this.addressId + '&buyType=' + this.buyType + '&cartChannel=' + this.cartChannel)
                .then((response) => {
                    if (response.status == 200) {
                        this.cartTotalAmount = response.data.object.cartTotalAmount;
                        this.empAmount = response.data.object.empAmount;
                        this.shipAmount = response.data.object.shipAmount;
                        this.totalAmount = response.data.object.totalAmount;
                        this.isEmployee = response.data.object.isEmployee;
                    }
                }).catch((error) => {
                });
        },
        //订单列表
        goodlist(item) {
            this.$router.push('/goodslist?shop=' + item);
        },
        activePurchase(index) {
            if (index == 0) {
                this.parents = true;
                this.buyType = '1';
            } else {
                this.parents = false;
                this.buyType = '2';
            }
            this.isActive = [];
            this.$set(this.isActive, index, true);
        },
        //生成订单
        pay() {
            if (this.addressId == '' && this.buyType == '1') {
                this.$dialog.toast({
                    mes: '请填写邮寄地址',
                    timeout: 600
                });
                return false;
            }
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'checkout/saveOrder?invoiceId=' + this.invoiceId + '&addressId=' + this.addressId + '&buyType=' + this.buyType + '&cartChannel=' + this.cartChannel)
                .then((response) => {
                    if (response.status == 200) {
                        this.$dialog.loading.close();            
                        // 发送PV统计请求
                        //  _czc.push(["_trackPageview", "/puchase", ""]);           
                        // 发送页面上按钮等交互元素被触发时的事件统计请求
                        _czc.push(["_trackEvent", "下单", "确认下单"]);
                        if (response.data.msg == 'SUCCESS') {
                            // object.orderId:8位的OrderBatchNumber
                            // object.orderSn:四位的OrderId
                            // object.orderSns:19位的OrderSn
                            let orderSns = response.data.object.orderSns;
                            let param = 'orderId=' + response.data.object.orderId + '&orderlist=' + response.data.object.orderSn + '&buyType=' + this.buyType + '&orderAmount=' + response.data.object.orderAmount;
                            // if (orderSns.indexOf(',') > 0) {
                            //     href = this.href + '#/pay/paymoney?orderId=' + response.data.object.orderId + '&orderlist=' + response.data.object.orderSn + '&buyType=' + this.buyType + '&orderAmount=' + response.data.object.orderAmount;
                            // } else {
                            //     href = this.href + '#/pay/paymoney?orderSn=' + response.data.object.orderSns + '&orderlist=' + response.data.object.orderSn + '&buyType=' + this.buyType + '&orderId=' + response.data.object.orderId + '&orderAmount=' + response.data.object.orderAmount;
                            // }
                            if (orderSns.indexOf(',') <= 0) {
                                param = 'orderSn=' + response.data.object.orderSns + '&' + param;
                            }
                            let href = '/pay/paymoney?' + param  + '&pageFlg=purchase';
                            //window.location.replace(href);
                            this.$router.push(href);
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 600
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //地址
        receiving() {
            this.$router.push('/receiving?pay=1');
        },
        //发票
        invoice() {
            // let invId = '';
            // if (this.inoice) {
            //     invId = this.inoice.invId;
            // }
            this.$router.push('/invoice');
        }
    }
}
</script>
<style  scoped>
.bottom_fiexd {
    position: fixed;
    width: 100%;
    height: 0.9rem;
    left: 0;
    bottom: 0;
    background: #FB6C68;
    color: #fff;
    line-height: 0.9rem;
    text-align: center;
    font-size: 14px;
    z-index: 99;
}

.order_ul {
    width: 100%;
    height: auto;
    padding: 0.15rem 0.5rem;
    font-size: 14px;
    box-sizing: border-box;
}

.order_ul li {
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    overflow: hidden;
}

.order_lefts {
    width: 50%;
    height: 100%;
    float: left;
}

.order_name {
    float: left;
    width: 3.2rem;
    height: 1.5rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order_rights {
    width: 50%;
    height: 100%;
    float: left;
    color: #FB6C68;
    text-align: right;
}

.order_rights b {
    font-weight: 400;
    color: #4a4a4a;
}

.order_boxs {
    width: 100%;
    height: auto;
    margin-bottom: 1.2rem;
    overflow: hidden;
    color: #4a4a4a;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}

.order_title {
    width: 100%;
    height: 0.8rem;
    padding: 0 0.5rem;
    font-size: 16px;
    line-height: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
}

.order_img {
    width: 100%;
    height: 1.9rem;
    padding: 0.2rem 0.5rem;
    padding-right: 1.5rem;
    background: #F2EDE9;
    overflow: hidden;
    position: relative;
}

.order_right {
    position: absolute;
    right: 0.4rem;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    top: 50%;
}

.order_right:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: inline-block;
    font-family: YDUI-INLAY;
    font-size: 14px;
    content: "\E608";
}

.order_img img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 5px;
    float: left;
    margin-right: 0.2rem;
}

.purchase_box {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 0.4rem;
    padding-top: 1.5rem;
    height: auto;
    overflow: hidden;
    color: #4a4a4a;
    font-size: 16px;
}

.purchase_box_ul {
    width: 100%;
    height: auto;
    min-height: 1rem;
    box-sizing: border-box;
    padding: 0.2rem;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    border: 1px solid #D6D6D6;
}

.purchase_imgs {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.purchase_imgs canvas {
    width: 1.6rem!important;
    height: 1.6rem!important;
    transform: scale(1.15);
    float: left;
}

.purchase_imgs .purchase_imgs_right {
    float: left;
    width: calc(100% - 1.6rem);
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.1rem;
    font-size: 0.28rem;
    color: #999;
    line-height: 0.4rem;
    overflow: hidden;
    text-align: justify;
}

.editBtn {
    position: absolute;
    right: 0.2rem;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    color: #888;
    top: 50%;
    margin-top: -10px;
}

.editBtn:after,
.bottom_fiexd:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: inline-block;
    font-family: YDUI-INLAY;
    font-size: 12px;
    content: "\E608";
}

.bottom_fiexd:after {
    font-size: 14px;
}

.purchase_img {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    top: -0.1rem;
    left: 0;
}

.purchase_img img {
    width: 100%;
}

.purchase_box_ul_bottom {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0.15rem 0.2rem;
    overflow: hidden;
    position: relative;
    border: 1px solid #D6D6D6;
    border-top: 0;
    border-bottom: 0;
}

.purchase_title {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase_title_dz {
    width: 88%;
    height: auto;
    min-height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    font-size: 14px;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
}

.purchase_title_fp {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    font-size: 14px;
    color: #888;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase_title b {
    margin-right: 0.2rem;
}

.love_list {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background: #fff;
    box-shadow: 0 3px 10px #bbb;
}

.btn_list {
    width: 80%;
    height: 0.8rem;
    font-size: 14px;
    line-height: 0.85rem;
    margin: 0.2rem auto;
    color: #FB6C68;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    background: #F0F0F0;
}

.btn_list li {
    width: 50%;
    height: 100%;
    float: left;
}

.btn_list li.active {
    color: #fff;
    background: #FB6C68;
}

.loveYuan {
    background: #fff;
    width: 0.8rem;
    position: absolute;
    left: 50%;
    text-align: center;
    line-height: 0.8rem;
    top: 0.2rem;
    color: #FB6C68;
    margin-left: -0.4rem;
    height: 0.8rem;
    border-radius: 50%;
    overflow: hidden;
}
</style>